<template>
  <div class="splist">
    <div class="breadcrumb">
      <ElBreadcrumb separator="/">
        <ElBreadcrumbItem :to="{ path: '/' }">首页</ElBreadcrumbItem>
        <ElBreadcrumbItem><a href="/">商品</a></ElBreadcrumbItem>
        <ElBreadcrumbItem>商品分类编辑</ElBreadcrumbItem>
      </ElBreadcrumb>
    </div>
    <div class="splist_cont">
      <div class="cont_view">
        <div class="body">
          <el-form ref="ruleFormRef" :data="list" label-width="120px" class="demo-ruleForm addCoupon" size="large"
            status-icon :rules="rules" :model="list">
            <el-form-item label="广告名称" prop="name" required>
              <el-input v-model="list.name" />
            </el-form-item>
            <!-- <el-form-item label="广告位置" prop="level">
              <el-select placeholder="请选择分类">
                <el-option label="PC首页轮播" value="shanghai" />
                <el-option label="APP首页轮播" value="shanghai" />
              </el-select>
            </el-form-item> -->

            <el-form-item label="广告位置:" label-width="120px">
              <el-select v-model="list.type" class="m-2" placeholder="全部">
                <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>


            <el-form-item label="开始时间" label-width="100px" required>
              <el-date-picker v-model="list.startTime" type="startTime" />
            </el-form-item>

            <el-form-item label="结束时间" label-width="100px" required>
              <el-date-picker v-model="list.endTime" type="endTime" />
            </el-form-item>



            <el-form-item label="是否显示" prop="showStatus">
              <div class="mb-2 flex items-center text-sm">
                <el-radio-group v-model="radio1" class="ml-4">
                  <el-radio label="1" size="large">下线</el-radio>
                  <el-radio label="0" size="large">上线</el-radio>
                </el-radio-group>
              </div>
            </el-form-item>

            <el-form-item label="广告图片">

              <!-- 上传图片 -->
              <el-upload v-model:file-list="fileList" class="upload-demo" :on-preview="handlePreview"
                :on-remove="handleRemove" list-type="picture">
                <el-button type="primary">上传图片</el-button>
                <template #tip>
                  <div class="el-upload__tip">
                    只能上传jpg/png文件,且不超过100kb
                  </div>
                </template>
              </el-upload>

            </el-form-item>

            <el-form-item label="排序" prop="sort">
              <el-input v-model="list.sort" />
            </el-form-item>
            <el-form-item label="广告链接" prop="url" required>
              <el-input v-model="list.url" />
            </el-form-item>
            <el-form-item label="广告备注" prop="description" type="textarea">
              <el-input v-model="list.note" type="textarea" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="default" @click="sureFn(ruleFormRef)">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>

</template>

<script setup lang="ts">
import { reactive, ref, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import { user } from "@/api";
import { ElMessage, ElMessageBox, FormInstance, FormRules, UploadProps, UploadUserFile } from "element-plus";

const radio1 = ref("1");
const radio2 = ref("1");
const route = useRoute();
const router = useRouter();
// console.log(route.query.id);
interface IState {
  list: advertiseList
}

const state = reactive<IState>({
  list: {
    clickCount: 0,
    endTime: '',
    id: 0,
    name: '',
    note: '',
    orderCount: 0,
    pic: '',
    sort: 0,
    startTime: '',
    status: 0,
    type: 0,
    url: ''
  }
})

const ID = ref<number>(0)
if (route.query.id) {
  ID.value = +route.query.id
  user.advertiseIDApi(ID.value).then(res => {
    console.log(res);
    state.list = res.data

  })
}

const ruleFormRef = ref<FormInstance>();
const sureFn = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    console.log(valid);
    if (valid) {
      ElMessageBox.confirm("提示", "是否提交数据", {
        type: "warning",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        if (ID.value) {
          user.advertiseUpdate({ id: ID.value, advertise: state.list }).then(res => {

          })
          router.push('/sms/homeAdvertise')
        } else {
          user.advertiseCreate(state.list).then(res => {
            console.log(res);

          })
        }

      })

    }
  })
}




//校验
const rules = {
  name: [
    { required: true, message: "请输入广告名称", trigger: "blur" },
    { min: 6, max: 20, message: "账号要在6~20个字符之间", trigger: "blur" },
  ],
  startTime: [
    { required: true, message: "请选择开始时间", trigger: "blur" },
    { min: 6, max: 20, message: "姓名要在6~20个字符之间", trigger: "blur" },
  ],
  endTime: [
    { required: true, message: "请选择开始时间", trigger: "blur" },
    { type: "email", message: "请填空正确的邮箱地址", trigger: ["blur", "change"] },
  ],
  url: [
    { required: true, message: "请输入广告链接", trigger: "blur" },
    { message: "密码要在6~20个字符之间", trigger: "blur" },
  ]
}

const options2 = [
  {
    value: 0,
    label: 'PC首页轮播',
  },
  {
    value: 1,
    label: 'APP首页轮播',
  },
]

//上传


const fileList = ref<UploadUserFile[]>([
  {
    name: 'food.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  },

])

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePreview: UploadProps['onPreview'] = (file) => {
  console.log(file)
}
const { list } = toRefs(state)
</script>

<style lang="less" scoped>
.splist {
  margin: auto;
  overflow-y: auto;
}

.breadcrumb {
  width: 100%;
  z-index: 999;
  background-color: #fff;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  top: 70px;
}

.splist_cont {
  margin-top: 50px;
  padding: 10px 20px;

  .cont_view {
    // position: absolute;
    left: 200px;
    right: 0;
    width: 720px;
    padding: 35px 35px 15px 35px;
    margin: 20px auto;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    overflow: hidden;
    color: #303133;
    transition: 0.3s;

    .body {
      padding: 20px;
    }
  }
}
</style>
